<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          <button @click="camera">
            <img
              style="width: 200px; height: 200px;"
              id="up"
              :src="form.proImage"
              alt="点击我上传检测图"
            />
          </button></div
      ></el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple" v-if="show">
          <span>
             <div>姓名{{this.face.user.name }}</div>
            <div>性别:{{ this.face.user.gender }}</div>
               <div>电话:{{ this.face.user.telphone }}</div>
            <div>班级：{{ this.face.user.uclass }}</div>
            <div>年龄:{{ this.face.user.age }}</div>
            <div>地址：{{this.face.user.address }}</div>
       
            <div>个人简介:{{ this.face.user.infor }}</div>
          </span>
        </div>
        <div v-if="!show">
            <h2 >数据库中查无此人</h2>
             <div>年龄:{{ this.face.age }}</div>
             <div v-if="this.face.kouzhao == 1">
                <span style="color:green">已佩戴口罩</span>
             </div>
              <div v-else>
                <span style="color:red">没有佩戴口罩</span>
             </div>
            <div>3d角度:{{ this.face.d3 }}</div>

      
        </div>
  
      </el-col>
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
  </div>
</template>

<script>
import { listSearchMixin } from "@/config";

export default {
  mixins: [listSearchMixin],
  name: "",
  data() {
    //这里存放数据
    return {
      form: {
        proImage: "",
      },
      face:{
        user:true
      },
      show:true
    };
  },
  methods: {

    camera(){
        let params = {
        url: 'http://localhost:8070/checkUpload',
        method:'post',
        }
        
        this.sendReq(params, (res) => {
                this.form.proImage = res.imgUrlshow
        console.log(this.form.proImage)
        console.log(res)
        if(res.user == null){
          this.show = false
        }
        this.face = res
        });
    }
    // uploadSectionFile(params) {
    //   var file = params.file;
    //   this.uploadFile(file);
    // },
    // beforeupload(file) {
    //   console.log(file);
    //   //创建临时的路径来展示图片
    //   return true;
    // },
    // //覆盖默认的上传行为
    // httprequest() {},
    // uploadFile: function (file) {
    //   // 上传的函数
    //   var formData = new FormData();
    //   formData.append("file", file);
    //   let params = {
    //     url: "http://localhost:8070/checkUpload",
    //     contentType: "multipart/form-data",
    //     method: "post",
    //     data: formData,
    //   };
    //   this.sendReq(params, (res) => {
    //     this.form.proImage = res.imgUrlshow
    //     console.log(this.form.proImage)
    //     console.log(res)
    //     if(res.user == null){
    //       this.show = false
    //     }
    //     this.face = res
    //   });
    // },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
};
</script>
